import { Button, message, Modal, Space } from 'ant-design-vue'
import { defineComponent, nextTick, ref, watch } from 'vue'

import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { useDialog } from '@/hooks'
import { handlePrice } from '@/utils/bsshow'

import JdgGoodsList from './jdgGoodsList'

export default defineComponent({
  name: 'JdgGoodsSelectList',
  props: {
    jdgGoods: {
      type: Array,
      required: true
    }
  },
  emits: ['dataCallback'],
  setup(props, { emit }) {
    const { showConfirm } = useDialog()
    const showJdgGoodsModal = ref(false)
    const jdgGoodsList = ref<ComponentRef>({})
    const jdgGoodsSelect = ref(props.jdgGoods as any[])

    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: 400,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '商品名称',
            field: 'productName',
            minWidth: 150
          },
          {
            title: '操作',
            slots: {
              default: 'operation'
            },
            width: 100
          }
        ]
      }
    } as ProTableProps)

    watch(
      () => props.jdgGoods,
      () => {
        jdgGoodsSelect.value = props.jdgGoods
      },
      {
        immediate: true
      }
    )

    function handleDeleteJdgGoods(row) {
      showConfirm({
        content: '确认删除该商品？',
        onOk: () => {
          jdgGoodsSelect.value = jdgGoodsSelect.value.filter(val => {
            return val.productId != row.productId
          })
          handleCallback()
        }
      })
    }

    function handleShowJdgGoodsSelect() {
      showJdgGoodsModal.value = true
      nextTick(() => {
        jdgGoodsList.value!.showModal(jdgGoodsSelect.value)
      })
    }

    function handleJdgGoodsSelect() {
      const list = jdgGoodsList.value!.handleJdgGoodsSelect().map(val => {
        return { productId: val.id, productName: val.name }
      })
      if (jdgGoodsSelect.value) {
        jdgGoodsSelect.value = jdgGoodsSelect.value.concat(list)
      } else {
        jdgGoodsSelect.value = list
      }
      handleCallback()
      showJdgGoodsModal.value = false
    }

    function handleCallback() {
      emit('dataCallback', jdgGoodsSelect.value)
    }

    function handleCleanData() {
      jdgGoodsSelect.value = []
    }

    return {
      tableRef,
      tableConfig,
      jdgGoodsList,
      jdgGoodsSelect,
      showJdgGoodsModal,
      handleJdgGoodsSelect,
      handleDeleteJdgGoods,
      handleShowJdgGoodsSelect,
      handleCleanData
    }
  },
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.handleShowJdgGoodsSelect}>
          选择商品
        </Button>
        <ProTable
          ref="tableRef"
          data={this.jdgGoodsSelect}
          v-show={this.jdgGoodsSelect?.length > 0}
          style={{ width: '450px', marginTop: '10px' }}
          v-slots={{
            salePrice: ({ row }) => {
              return (
                <Space>{handlePrice(row.salesPrice, row.salesGoldBean)}</Space>
              )
            },
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDeleteJdgGoods(row)}
                >
                  删除
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.showJdgGoodsModal}
          title="选择商品"
          destroyOnClose
          onOk={this.handleJdgGoodsSelect}
          width={900}
        >
          <JdgGoodsList ref="jdgGoodsList" />
        </Modal>
      </div>
    )
  }
})
